<script setup lang="ts">
import { defineEmits } from "vue";
const props = defineProps({
  lists: {
    type: Array,
    default: () => []
  }
});
const $emit = defineEmits(["delClick"]);
import uploads from "@/views/sponsor/info/upload.vue";
import { RemoveFilled } from "@element-plus/icons-vue";
const deletes = index => {
  const list = props.lists;
  list.splice(index, 1);
  $emit("delClick", list);
};
</script>

<template>
  <el-descriptions
    :column="2"
    border
    v-for="(item, index) in props.lists"
    class="mr-[30px] pr-[40px] mt-[20px] relative"
  >
    <el-descriptions-item label="照片" width="150" :span="2">
      <uploads :limit="5" :imageList="item.imageList" />
    </el-descriptions-item>
    <el-descriptions-item label="照片说明" width="150">
      <el-input
        v-model="item.content"
        placeholder="请填写照片说明"
        :autosize="{ minRows: 2, maxRows: 4 }"
        maxlength="500"
        show-word-limit
        type="textarea"
      ></el-input>
      <el-icon
        color="#F56C6C"
        class="cursor-pointer delPoas"
        :size="18"
        @click="deletes(index)"
      >
        <RemoveFilled />
      </el-icon>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style lang="scss" scoped>
.delPoas {
  position: absolute;
  right: 0px;
  top: 50%;
}
</style>
